<template>
  <view>
    <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view>
        <text class="title">{{ title }}</text>
      </view>
    </view>
    <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
    <view>
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper
              class="swiper"
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
            >
              <swiper-item>
                <view class="swiper-item uni-bg-red">A</view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item uni-bg-green">B</view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item uni-bg-blue">C</view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
      <view class="swiper-list">
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">指示点</view>
          <switch :checked="indicatorDots" @change="changeIndicatorDots" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">自动播放</view>
          <switch :checked="autoplay" @change="changeAutoplay" />
        </view>
      </view>
      <view class="uni-padding-wrap">
        <view class="uni-common-mt">
          <text>幻灯片切换时长(ms)</text>
          <text class="info">{{ duration }}</text>
        </view>
        <slider :value="duration" min="500" max="2000" @change="durationChange" />
        <view class="uni-common-mt">
          <text>自动播放间隔时长(ms)</text>
          <text class="info">{{ interval }}</text>
        </view>
        <slider :value="interval" min="2000" max="10000" @change="intervalChange" />
      </view>
    </view>
  </view>
</template>

<script>
import { getProduct } from '@/api/shopping';
export default {
  data() {
    return {
      title: 'Hello world aa',
      productMain: [],
      skip: 0,
      limit: 5,
      background: ['color1', 'color2', 'color3'],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500
    };
  },
  onLoad() {
    // 获取服务包列表
    this.getProductAjax();
  },
  methods: {
    async getProductAjax() {
      const sendData = {
        skip: this.skip,
        limit: this.limit
      };
      getProduct(sendData).then((res) => {
        this.productMain = this.productMain.concat(res.data);
      });
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 750rpx;
  width: 750rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
